<template>
    <div
        class="statusbar"
        :style="{ ...style()}">
        <div class="statusbarleft">
            <van-circle
                class="progress-space"
                :current-rate="formatemaintaincheckpercent(orderDetial.status)"
                layer-color="lightgrey"
                :stroke-width="50"
                :size="procBarSize"
                :text="procRateTxt"
                color="#61CFBE"
            >
            </van-circle>
            <div class="number-space">
                <span class="repairidtitle">{{$st('Order_No')}}:{{ orderDetial.maintainworkorderid || '--' }}</span>
                <span
                    :class="getclass(orderDetial.maintainremainingminutewx,orderDetial.status)">{{gethandletime(orderDetial.maintainremainingminutewx)}}</span>

            </div>
        </div>
        <div
            :style="statusSpaceStyle"
            class="status-space">
            {{ getcheckname(orderDetial.status) }}
        </div>
    </div>
</template>

<script lang="js">
import { reactive, toRefs, computed } from 'vue';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
import { getStatusData } from '@/setup/maintaincheckorder/MaintaincheckStatusFormat';
export default {
    name: '',
    components: {},
    props: {
        orderDetial: Object,
        height: {
            type: Number,
            default: 50
        },
        statusSpaceStyle: Object
    },
    setup (props, context) {
        const { formathandletime } = getRepairStatusData();
        const {
            formatemaintaincheckpercent,
            backcheckpercent,
            getcheckvalue,
            getcheckname
        } = getStatusData();
        const state = reactive({
            // handlecont: {},
            // // responsetime:0,
            newhandletime: 0

        });
        const style = () => {
            const customStyle = {
                height: `${props.height}px`
                // width: '100%'
                // marginRight: '5px',
                // marginLeft: '5px'
            };
            return customStyle;
        };
        const procBarSize = computed(() => {
            return props.height <= 32 ? props.height : 32;
        });
        const procRateTxt = computed(() => {
            if (backcheckpercent(props.orderDetial.status) === undefined) {
                return '0/3';
            } else {
                return backcheckpercent(props.orderDetial.status) + '/3';
            }
        });
        return {
            style,
            ...toRefs(state),
            formathandletime,
            formatemaintaincheckpercent,
            backcheckpercent,
            getcheckvalue,
            getcheckname,
            procRateTxt,
            procBarSize
        };
    },
    methods: {
        gethandletime (val) {
            // 移动端倒计时字段：maintainremainingminutewx
            if (val < 0 && this.orderDetial.status !== 'b_waitaccept' && this.orderDetial.status !== 'c_completed') {
                return '维检超时' + this.formathandletime(Math.abs(val));
            } else if ((val > 0 || val === 0) && (this.orderDetial.status === 'b_waitaccept' || this.orderDetial.status === 'c_completed')) {
                return '验收超时' + this.formathandletime(val);
            } else if (val < 0 && (this.orderDetial.status === 'b_waitaccept' || this.orderDetial.status === 'c_completed')) {
                return '验收超时' + this.formathandletime(Math.abs(val));
            } else {
                return '剩余' + this.formathandletime(val);
            }
            // const params = {
            //     repairid: this.repairid
            // };
            // this.gethandletime(params, (data) => {
            //     this.progressdata[0].timevalue = data.value.responsetime;
            //     this.progressdata[1].timevalue = data.value.handletime;
            //     this.progressdata[2].timevalue = data.value.evaluatetime;
            // });
            // };
        },
        getclass (val, status) {
            if (val < 0) {
                return 'repairtimesec';
            } else if (status === 'b_waitaccept' || status === 'c_completed') {
                return 'repairtimesec';
            } else {
                return 'repairtimefir';
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
.statusbarleft{
   display: flex;
   justify-content: flex-start;
   align-items: center;
}
}
// .statusbarcenter{
//     margin-left:10px;
//     display: flex;
//     flex-wrap: wrap;

.number-space{
    // height: 20px;
    margin-left:10px;
    /* margin-right: 8px; */
    /* margin-left:8px;
    margin-right: 8px; */
    /* overflow: hidden;
    white-space: nowrap; */
    word-break: break-all;
    display: flex;
    flex-wrap: wrap;
    min-width: 223px;
    // line-height: 20px;
    .repairidtitle{
        min-width: 223px;
    }
    // .repairtime{
    //     min-width: 223px;
    //     //  width: 100%;
    //     height: 20px;
    //     line-height: 20px;
        .repairtimefir{
            min-width: 223px;
        //  width: 100%;
        height: 20px;
        line-height: 20px;
            color: #61CFBE;
        }
        .repairtimesec{
            min-width: 223px;
        //  width: 100%;
        height: 20px;
        line-height: 20px;
            color:#E84026;
        }
    // }
}
// }
.status-space{
    text-align:center;
    height: 20px;
    line-height: 20px;
    min-width: 50px;
    /* width: 50px; */
    overflow: hidden;
}
.status-space:lang(en) {
  text-align: center;
  /* height: 20px;
    line-height: 20px; */
  /* width: 50px; */
  height: auto;
  line-height: auto;
  min-width: 80px;
  word-wrap: break-word;
  /* background-color: yellow; */
}
.progress-space {
  min-width: 36px;
}
</style>
